<template lang="pug">
.house_box
    h4 房源
    .block_box
        el-row(:gutter="20")
            el-col(:span="10")
                el-autocomplete(v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" name="")
            el-col(:span="4")
                el-button(type="primary") 查询
        ul.ul_box
            li(v-for="(item, index) in typeData" :key="index")
                a(href="javascript:;") 
                    |{{item.type}}
                    |({{item.size}})
        ul.ul_box
            li(v-for="(item, index) in typeTwoData" :key="index")
                a(href="javascript:;") 
                    |{{item.type}}
                    |({{item.size}})
            li 
                el-select(v-model="value" placeholder="请选择" size="small")
                    el-option(v-for="item in options" :key="item.value" :label="item.label"  :value="item.value")
    .house_item
        .house_head
            h3
                a(href="javascript:;") {{houseData.name}}
        .house_body
            el-container
                el-aside.house_aside(width="40px") {{houseData.layer}}
                el-main
                  houseGrids(:content="houseData.houseList")

</el-badge>

</template>

<script>
  import houseGrids from '../components/common/houseGrids'

  export default {
    data () {
      return {
        restaurants: [],
        state4: '',
        timeout: null,
        typeData: [
          {
            type: '1室1厅1卫',
            size: 20
          },
          {
            type: '1室1厅1卫大飘窗',
            size: 270
          },
          {
            type: '1室1厅1卫湖景',
            size: 420
          },
          {
            type: '4室1厅1卫',
            size: 320
          },
          {
            type: '4室1厅4卫',
            size: 2088
          }
        ],
        typeTwoData: [
          {
            type: '全选',
            size: 20
          },
          {
            type: '空房',
            size: 270
          },
          {
            type: '预定',
            size: 420
          },
          {
            type: '待人住',
            size: 320
          },
          {
            type: '入住中',
            size: 2088
          },
          {
            type: '维修房',
            size: 2088
          }
        ],
        options: [{
          value: '选项1',
          label: '一个月到期'
        }, {
          value: '选项2',
          label: '二个月到期'
        }, {
          value: '选项3',
          label: '三个月到期'
        }, {
          value: '选项4',
          label: '四个月到期'
        }, {
          value: '选项5',
          label: '五个月到期'
        }],
        value: '',
        houseData: {
          name: '广州金河公园N+公寓',
          layer: '2层18间',
          houseList: [
            {
              tag: '空',
              name: '1室1厅一卫',
              serial: '0208',
              number: 'NO:00382',
              price_d: '300元/日',
              price_m: '4800元/月'
            },
            {
              tag: '住',
              name: '1室1厅一卫',
              serial: '0208',
              number: 'NO:00382',
              price_d: '300元/日',
              price_m: '4800元/月'
            },
            {
              tag: '定',
              name: '1室1厅一卫',
              serial: '0208',
              number: 'NO:00382',
              price_d: '300元/日',
              price_m: '4800元/月'
            },
            {
              tag: '待',
              name: '1室1厅一卫',
              serial: '0208',
              number: 'NO:00382',
              price_d: '300元/日',
              price_m: '4800元/月'
            },
            {
              tag: '修',
              name: '1室1厅一卫',
              serial: '0208',
              number: 'NO:00382',
              price_d: '300元/日',
              price_m: '4800元/月'
            },
            {
              tag: '锁',
              name: '1室1厅一卫',
              serial: '0208',
              number: 'NO:00382',
              price_d: '300元/日',
              price_m: '4800元/月'
            }
          ]
        }
      }
    },
    components: {
      houseGrids
    },
    computed: {

    },
    created () {

    },
    mounted () {
      this.restaurants = this.loadAll()
    },
    methods: {
      // 远程搜索
      loadAll () {
        return [
          { value: '三全鲜食（北新泾店）', address: '长宁区新渔路144号' },
          { value: 'Hot honey 首尔炸鸡（仙霞路）', address: '上海市长宁区淞虹路661号' },
          { value: '新旺角茶餐厅', address: '上海市普陀区真北路988号创邑金沙谷6号楼113' },
          { value: '泷千家(天山西路店)', address: '天山西路438号' },
          { value: '胖仙女纸杯蛋糕（上海凌空店）', address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
          { value: '贡茶', address: '上海市长宁区金钟路633号' },
          { value: '豪大大香鸡排超级奶爸', address: '上海市嘉定区曹安公路曹安路1685号' },
          { value: '茶芝兰（奶茶，手抓饼）', address: '上海市普陀区同普路1435号' },
          { value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
          { value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
          { value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
          { value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
          { value: 'Monica摩托主题咖啡店', address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
          { value: '浮生若茶（凌空soho店）', address: '上海长宁区金钟路968号9号楼地下一层' },
          { value: 'NONO JUICE  鲜榨果汁', address: '上海市长宁区天山西路119号' },
          { value: 'CoCo都可(北新泾店）', address: '上海市长宁区仙霞西路' },
          { value: '快乐柠檬（神州智慧店）', address: '上海市长宁区天山西路567号1层R117号店铺' },
          { value: 'Merci Paul cafe', address: '上海市普陀区光复西路丹巴路28弄6号楼819' },
          { value: '猫山王（西郊百联店）', address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
          { value: '枪会山', address: '上海市普陀区棕榈路' },
          { value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
          { value: '钱记', address: '上海市长宁区天山西路' },
          { value: '壹杯加', address: '上海市长宁区通协路' }
        ]
      },
      querySearchAsync (queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          cb(results)
        }, 3000 * Math.random())
      },
      createStateFilter (queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect (item) {
        console.log(item)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/scss/_variables.scss';
  .house_box {
    a {
        color: $--color-text-primary !important;
    }
    .ul_box {
        padding: 10px 0;
        clear: both;
        list-style: none;
        margin-bottom: -10px;
        overflow: hidden;
        li {
            float: left;
            margin-right: 20px;
            line-height: 30px;
        }
        &:not(:last-child) {
            border-bottom: 1px solid #eaeefb;
        }
    }
    .house_head {
        margin-bottom: 10px;
    }
    .house_body {
        .el-main {
            padding: 0 0 0 10px;
        }
    }
    .house_aside {
        padding: 5px;
        background: #F2F6FC;
    }
    .badge_box {
        margin: 20px auto;
        .item {
            margin-right: 60px;
        }
        .badge_title {
            min-width: 60px;
        }
    }

  }
</style>

